<!-- templates/register.html -->
{% extends 'base.html' %}
{% load static %}
{% block content %}

<style>
    .form-section {
        display: none;
    }


</style>

<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0">🔐 用户注册</h3>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}

                    <!-- 用户名 -->
                    <div class="mb-3">
                        <label for="{{ form.username.id_for_label }}" class="form-label">用户名</label>
                        <input type="text"
                               class="form-control {% if form.username.errors %}is-invalid{% endif %}"
                               id="{{ form.username.id_for_label }}"
                               name="{{ form.username.name }}"
                               value="{{ form.username.value|default:'' }}"
                               required>
                        {% if form.username.errors %}
                        <div class="invalid-feedback">
                            {{ form.username.errors|join:", " }}
                        </div>
                        {% endif %}
                    </div>

                    <!-- 邮箱 -->
                    <div class="mb-3">
                        <label for="{{ form.email.id_for_label }}" class="form-label">邮箱</label>
                        <input type="email"
                               class="form-control {% if form.email.errors %}is-invalid{% endif %}"
                               id="{{ form.email.id_for_label }}"
                               name="{{ form.email.name }}"
                               value="{{ form.email.value|default:'' }}"
                               required>
                        {% if form.email.errors %}
                        <div class="invalid-feedback">
                            {{ form.email.errors|join:", " }}
                        </div>
                        {% endif %}
                    </div>

                    <!-- 密码 -->
                    <div class="mb-3">
                        <label for="{{ form.password1.id_for_label }}" class="form-label">密码</label>
                        <input type="password"
                               class="form-control {% if form.password1.errors %}is-invalid{% endif %}"
                               id="{{ form.password1.id_for_label }}"
                               name="{{ form.password1.name }}"
                               required>
                        {% if form.password1.errors %}
                        <div class="invalid-feedback">
                            {{ form.password1.errors|join:", " }}
                        </div>
                        {% endif %}
                    </div>

                    <!-- 确认密码 -->
                    <div class="mb-3">
                        <label for="{{ form.password2.id_for_label }}" class="form-label">确认密码</label>
                        <input type="password"
                               class="form-control {% if form.password2.errors %}is-invalid{% endif %}"
                               id="{{ form.password2.id_for_label }}"
                               name="{{ form.password2.name }}"
                               required>
                        {% if form.password2.errors %}
                        <div class="invalid-feedback">
                            {{ form.password2.errors|join:", " }}
                        </div>
                        {% endif %}
                    </div>

<!-- 用户类型 -->
<div class="mb-3">
    <label for="{{ form.role.id_for_label }}" class="form-label">用户类型</label>
    <select class="form-select"
            id="{{ form.role.id_for_label }}"
            name="{{ form.role.name }}"
            required>
        {% for value, text in form.role.field.choices %}
        <option value="{{ value }}"
                {% if form.role.value == value %}selected{% endif %}>
            {{ text }}
        </option>
        {% endfor %}
    </select>
</div>



                    <!-- 地址 -->
                    <div class="mb-3 form-section" id="address-group">
                        <label for="{{ form.address.id_for_label }}" class="form-label">地址</label>
                        <input type="text"
                               class="form-control"
                               id="{{ form.address.id_for_label }}"
                               name="address"
                               value="{{ form.address.value|default:'' }}">
                    </div>

                    <!-- 公司名称 -->
                    <div class="mb-3 form-section" id="company-group">
                        <label for="{{ form.company.id_for_label }}" class="form-label">公司名称</label>
                        <input type="text"
                               class="form-control"
                               id="{{ form.company.id_for_label }}"
                               name="company"
                               value="{{ form.company.value|default:'' }}">
                    </div>

                    <!-- 营业执照编号 -->
                    <div class="mb-3 form-section" id="license-group">
                        <label for="{{ form.business_license.id_for_label }}" class="form-label">营业执照编号</label>
                        <input type="text"
                               class="form-control"
                               id="{{ form.business_license.id_for_label }}"
                               name="business_license"
                               value="{{ form.business_license.value|default:'' }}">
                    </div>


                    <!-- 提交按钮 -->
                    <div class="d-grid mt-4">
                        <button type="submit" class="btn btn-success btn-lg">注册</button>
                    </div>
                </form>

                <hr>

                <div class="mt-3 text-center">
                    已有账户？
                    <a href="{% url 'login' %}" class="text-primary">立即登录</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const roleSelect = document.getElementById("{{ form.role.id_for_label }}");
        const addressGroup = document.getElementById('address-group');
        const companyGroup = document.getElementById('company-group');
        const licenseGroup = document.getElementById('license-group');

        function toggleFields() {
            const selectedRole = roleSelect.value;

            addressGroup.style.display = 'none';
            companyGroup.style.display = 'none';
            licenseGroup.style.display = 'none';

            if (selectedRole === 'customer') {
                addressGroup.style.display = 'block';
                companyGroup.style.display = 'block';
            } else if (selectedRole === 'producer') {
                companyGroup.style.display = 'block';
                licenseGroup.style.display = 'block';
            }
        }

        roleSelect.addEventListener('change', toggleFields);
        toggleFields();  // 初始执行一次
    });

</script>


{% endblock %}
